<template>
	<view class="uni-list">
		<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value, key) in listData" :key="key">
			<view class="uni-product-list">
				<image class="uni-product-list-logo" :src="value.imgUrl" @click="goDetail(value)"></image>
				<view class="uni-product-list-body">
					<view class="uni-product-list-text-top">{{ value.name }}</view>
					<view class="uni-product-list-text-bottom">
						<text> ￥{{ value.price }}</text>
						<!-- <text>{{ value.published_at }}</text> -->
						<image class="uni-product-list-buy" src="@/static/image/buy_car.png" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: {
			listData: {
				type: Array,
				default: []
			},
		},
		data() {
			return {
			}
		},
		methods:{
			goDetail(value){
				this.$emit("imgClick",value)
			}
		}
	}
</script>

<style>
	.uni-product-list {
		padding: 22rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		width: 100%;
		flex-direction: row;
	}
	.uni-product-list-logo{
		width: 180rpx;
		height: 140rpx;
		margin-right: 20rpx;
	}
	.uni-product-list-logo image {
		height: 100%;
		width: 100%;
	}
	.uni-product-list-body{
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: flex-start;
		overflow: hidden;
		height: auto;
		justify-content: space-around;
	}
	.uni-product-list-text-top{
		width: 100%;
		line-height: 36rpx;
		font-size: 30rpx;
		height: 74rpx;
		font-size: 28rpx;
		overflow: hidden;
	}
	.uni-product-list-text-bottom{
		width: 100%;
		line-height: 30rpx;
		font-size: 26rpx;
		/* color: #8f8f94; */
		color: #ef791d;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.uni-product-list-buy{
		width: 40rpx;
		height: 40rpx;
	}
</style>
